<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分支结构</title>
	</head>
	<body>
		<div id="app">
			<!-- 用户可以手动输入成绩,根据成绩,自动计算等级 
						>=90  优秀
						>=80  良好
						>=70  中等
						>=60  及格
						否则  继续努力
					命令:
							1.v-if   如果判断为true  则展现元素
							2.v-else-if  如果不满足v-if,检查v-else-if，满足则展现元素
							3.v-else  上述都不满足  才展现
			-->
			请输入成绩: <input type="number" v-model="score" /><br />
			等级: <h3 v-if="score>100">输入格式错误，请检查后在输入</h3>
					<h3 v-else-if="score>=90">优秀</h3>
					<h3 v-else-if="score>=80">良好</h3>
					<h3 v-else-if="score>=70">中等</h3>
					<h3 v-else-if="score>=60">及格</h3>
					<h3 v-else>继续努力</h3>
		</div>
		 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		 <script>
			const app = new Vue({
				el : "#app",
				data : {
					score: 0
				},
				methods: {
					
				}
			})
		 </script>
	</body>
</html>
